<template>
  <section class="lottery-address">
    <p class="lottery-address-title">编辑地址</p>
    <div class="lottery-address-control username">
      <label class="name-label">姓名</label><input type="text" name="name" v-model="user.name">
    </div>
    <p class="tips" v-show="!validatings.name"> 请认真填写自己的姓名哦</p>
    <div class="lottery-address-control">
      <div class="provinces user-cite" @click="getProvince">
        <input type="text" name="provinces" placeholder="省份" v-model="user.province" disabled="disabled"><label class=""></label>
      </div>
      <ul class="province-list" v-show="showProvinces">
        <li v-for="item in provinces" @click="choiceProvinces">{{item.name}}</li>
      </ul>
      <div class="cites user-cite" @click="listCites">
        <input type="text" name="cites" placeholder="城市" v-model="user.cite" disabled="true"><label class=""></label>
      </div>
      <ul class="province-list right" v-show="showCites">
        <li v-for="item in cites" @click="choiceCites">{{item.name}}</li>
      </ul>
    </div>    
    <div class="lottery-address_area">
      <textarea :placeholder="addrTips" class="textarea" name="address" v-model="user.address"> </textarea>
    </div>
    <p class="tips" v-show="!validatings.address"> 没有填地址，鲸鱼君怎么给你寄东西呢</p>
    <div class="lottery-address_btn">
      <a class="normal-btn" href="javascript: void 0;" @click="submit">提交</a>
    </div>
  </section>
</template>
<script type="text/javascript">
  import { updateUserAddress } from 'services/lottery';
  import region from 'china-area-data';
  import trim from 'lodash.trim';
  export default {
    props: {
      addrTips: {
        type: String,
        default: '快寄给我吧， 我等得花儿都谢了...'
      }
    },
    data() {
      return { 
        address: '',
        showProvinces: false, 
        showCites: false,
        provinces: [],
        cites: [],
        province_id: '',
        user: {
          name: '',
          province: '',
          cite: '',
          address: ''
        },
        region: region,
        validatings: {
          name: true,
          address: true,
          ismatch: true
        }
      };
    },
    mounted() {
      let cur_cites = this.region['86'];
      for(let i in cur_cites) {
        this.provinces.push({
          'id': i,
          'name': cur_cites[i]
        })
      }
    },
    methods: {
      getProvince() {
        this.showProvinces = true;
      },
      getcite(param) {        
        let i = 0, len = this.provinces.length;
        for(i=0; i<len; i++) {
          if(this.provinces[i].name==param) {
            this.province_id = this.provinces[i].id
          }
        }
        return this.province_id;
      },
      choiceProvinces(event) {
        this.user.province = trim(event.target.textContent);
        this.showProvinces = false;
        this.showcites = false;
        this.user.cite = '';
        this.cites.length = 0;        
        this.province_id = this.getcite(this.user.province) || this.province_id;
        var cur_province = this.region[this.province_id.slice(0,2)+'0000'];
        const cur_staticPro = cur_province[this.province_id.slice(0,2)+'0100'];
        console.log(cur_staticPro);
        if(/北京|上海|天津|重庆/.test(cur_staticPro)) {
          console.log(cur_staticPro.match(/北京|上海|天津/));
          cur_province = this.region[this.province_id.slice(0,2)+'0100'];
          for(let i in cur_province) {        
            this.cites.push({
              'id': i,
              'name': cur_province[i]
            })
          }          
        } else {
          for(let i in cur_province) {        
            this.cites.push({
              'id': i,
              'name': cur_province[i]
            })
          }          
        }

      },
      listCites() {
        this.showCites = true;
      },
      choiceCites() {
        this.user.cite = trim(event.target.textContent);
        this.showCites = false;
        this.showProvinces = false;
      },
      submit() {
        if(trim(this.user.name).length<=0) {
          this.validatings.name = false;
          return;
        } else {
          this.validatings.name = true;
        }      
        if(trim(this.user.province).length<=0 || trim(this.user.cite).length<=0 || trim(this.user.address).length<=0) {
          this.validatings.address = false;
          return;
        }        
        if (this.progressing) {
          return;
        }
        let address = trim(this.user.province)+trim(this.user.cite)+trim(this.user.address);
        let username = trim(this.user.name);
        this.progressing = true;
        if(!!address) {
         // this.hasAddress = 1;
          this.validatings.address = true;
          updateUserAddress({
            address,
            username
          }).then(({ status }) => {
            if(status==1) {
              this.$emit('submit', true);
            }
            this.progressing = false;
          })
        } else {
         // this.hasAddress = -1;
          this.validatings.address = false;
          this.progressing = false;
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  $font-active-color: #973aa8;
  $font-static-color: #8232a8;
  input {
    border:none;
  }
  .lottery-address-title {
    margin: 0;
    padding: 0 0 .55rem;
    font-size: .6rem;
    color: #fff;
  }
  .lottery-address-control {
    position: relative;
    margin-bottom: .3rem;
    height: 1.35rem;
    line-height: 1.35rem;
    font-size:0;
    color: $font-static-color;
    &.username {
      background: #fff; 
      border-radius: .089rem;        
    } 
    label.name-label {      
      display:inline-block;
      width: 2.06rem;
      height: 1rem;
      line-height: 1.05rem;
      margin-top: .18rem;
      font-size: .45rem;
      text-align: center;
      border-radius: .089rem 0 0 .089rem;
      vertical-align: top;
      border-right: 1px solid rgba(130, 50, 168, .3);           
    }
    input[name="name"] {
      box-sizing: border-box;      
      width: 6.6rem;
      height: inherit;
      padding:0 .25rem;
      font-size: .45rem;
      color: $font-static-color;
      border-radius: 0 .089rem .089rem 0;
      background: #fff;
      border:none;       
    }
  }
  .lottery-address_area {
    padding:0 0;
    textarea {
      width: 100%;
      height:1.35rem;
      padding:.41rem  .36rem;
      box-sizing:border-box;      
      margin-top:.45rem;
      color: $font-static-color;
      font-size: .45rem;
      border:1px solid #eee;
      border-radius:.089rem;
      resize:none;
      background-color: #f9f9f9;
      background-image: none;
      overflow: hidden;
      border:none;
      &:focus {
        background-color: #fff;
        outline-width:1px;
      }
    }
  }
  .lottery-address_btn {
    display:flex;
    justify-content:center;
    align-items:center;
    margin: .26rem 0 0;
    .normal-btn {
      display:inline-block;
      width: 8.8rem;
      height: 1.5rem; 
      line-height: 1.5rem;
      margin-top: .6rem;
      color: $font-active-color;
      font-size: .45rem;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
      background:url('~pages/app/assets/images/btn-go-to-lottery.png') no-repeat center;
      background-size:100% auto;
    }
  }
  .user-cite {
    display: inline-block;
    width: 4.1rem;
    height: 1.35rem;
    color: $font-static-color;
    font-size: 0;
    border-radius: .089rem;
    &.cites {
      margin-left: .6rem;
    }
    input[type="text"] {
      display: inline-block;
      width: 2.74rem;
      height: inherit;
      line-height: inherit;
      padding: 0;
      font-size: .45rem;
      color: $font-static-color;
      text-align: center;
      vertical-align: top;
      border-radius: .089rem 0 0 .089rem;
      border: none;
      &[disabled] {        
        -webkit-text-fill-color: $font-static-color;
        -webkit-opacity: 1;
        background: #fff;    
      }      
    }
    label{
      display: inline-block;
      width: 1.3rem;
      height: inherit;
      vertical-align: top;
      border-radius: 0 .089rem .089rem 0;
      background: rgb(255, 181, 235) url('~pages/app/assets/images/more-down.png') no-repeat center;
      background-size: .56rem .31rem;
    }
  }
  .tips {
    margin-top:.24rem;
    font-size: 0.336rem;
    color: rgb(174, 127, 192);
    text-align:center;
  }
  .province-list {
    position: absolute;
    top: 1.3rem;
    width: 4.05rem;
    max-height: 4rem;
    overflow-y: scroll;
    z-index: 999;
    font-size: .45rem;
    color: $font-static-color;
    background: #fff;
    border-radius: 0 0 .089rem .089rem;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      width: 3px;
      height: 5px;
      background-color: rgba(130,50,168, .15);      
    }
    &::-webkit-scrollbar-track {
      width:0x;
      background-color: rgba(0, 0, 0, 0);
    }
    li {
      padding: .25rem;
      line-height: 1.78;
      font-size: .36rem;
      border-bottom: 1px dashed rgba(125,125,125, .17);
    }
  }
  .province-list.right {
    right: .05rem;   
  }
</style>
